<template>
    <div class="chatContactLi">
        <div :style="style">
            <div class='contactsLi'>
                <div v-show="item.reply" class="ico_replay"></div>
                <div @click="toUserProfile(item.username,item.usr_id)" class="avatar" :class="getAvatarBgClass(item)">
                    <LazyImg :src="filterGenderImg(item.icon)"></LazyImg>
                </div>
                <router-link :to="{ name: 'message',query: { userName: item.username,userId:item.usr_id } }">
                    <div class="info">
                        <div class="name">
                            <span class="username">{{item.username}}</span>
                            <span v-show="item.formatTime" class="date">{{item.formatTime}}</span>
                        </div>
                        <div class="content" :style="{'-webkit-box-orient': 'vertical'}">
                            {{getMessage(item)}}
                        </div>
                        <div v-show="item.unReadNum > 0" class="num">{{item.unReadNum}}</div>
                    </div>
                </router-link>
            </div>
            <div class='contactsLiOpt' @click='deleteContact(item.usr_id,item.username)'>Delete</div>
        </div>
        <publicDialog :props="this.dialogData">{{errorCode}}</publicDialog>
    </div>
</template>
<script>
import chatPartMixin from '../common/chatPartMixin'
import publicDialog from './PublicDialog'
import LazyImg from './LazyImg'

export default {

    name: 'chatContactLi',

    props: ['item', 'index'],

    mixins: [chatPartMixin],

    components: {
        LazyImg,
        publicDialog
    },

    data() {
        return {
            dialogData: {},
            touchData: {
                transformX: 0,
                x1: 0,
                x2: 0,
                x: 70
            },
            style: '',
        }
    },

    created() {},

    mounted() {

        let tthis = this;
        this.$el.addEventListener('touchstart', e => {
            tthis.touchData.x1 = e.touches[0].pageX;
            tthis.touchData.y1 = e.touches[0].pageY;
            tthis.touchData.x2 = e.touches[0].pageX;
            tthis.touchData.y2 = e.touches[0].pageY;
        });
        this.$el.addEventListener('touchmove', e => {
            //e.preventDefault();
            //e.stopPropagation();
            tthis.resetStyle();
            tthis.touchData.x2 = e.touches[0].pageX;
            tthis.touchData.y2 = e.touches[0].pageY;
            tthis.touchMove(e);
        });
        this.$el.addEventListener('touchend', e => {
            tthis.touchEnd();
        })
    },

    methods: {

        toUserProfile: function(name, uid) {
            if (name.toLowerCase() != 'support') {
                this.$router.push({
                    name: 'userProfile',
                    query: {
                        userName: name,
                        userId: uid
                    }
                })
            }
        },

        getAvatarBgClass: function(item) {
            var avaClass = '';
            if (item.username.toLowerCase() == 'support') {
                avaClass = 'icon_seaviceAccount';
            } else {
                avaClass = this.getGenderBgClass(item.gender);
            }
            return avaClass;
        },

        resetStyle() {
            if (this.$parent.swtichedIndex > -1) {
                this.$parent.$refs.items[this.$parent.swtichedIndex].setCss(0, 200);
                this.$parent.swtichedIndex = -1;
            }
        },

        touchMove: function(e) {
            let mx = this.touchData.x2 - this.touchData.x1,
                my = this.touchData.y2 - this.touchData.y1;
            if (Math.abs(my) < Math.abs(mx)) {
                e.preventDefault();
                e.stopPropagation();
                if (this.touchData.x2 < this.touchData.x1) {
                    mx = mx < -this.touchData.x ? -this.touchData.x : mx;
                    if (this.touchData.transformX > -this.touchData.x) {
                        this.setCss(mx, 0);
                    }
                } else {
                    mx = -this.touchData.x + mx;
                    mx = mx > 0 ? 0 : mx;
                    if (this.touchData.transformX < 0) {
                        this.setCss(mx, 0);
                    }
                }
            }
        },

        touchEnd: function() {
            if (this.touchData.transformX < -this.touchData.x / 2) {
                this.setCss(-this.touchData.x, 100);
                this.$parent.swtichedIndex = this.index;
            } else if (this.touchData.transformX > -this.touchData.x / 2) {
                this.setCss(0, 100);
            }
        },

        setCss(x, time) {
            this.touchData.transformX = x;
            this.style = '-webkit-transform: translate(' + x + 'px,0px); -webkit-transition: ' + time + 'ms linear;-moz-transform: translate(' + x + 'px,0px);-moz-transition: ' + time + 'ms linear;';
        },

        deleteContact: function(userId, userName) {
            let tthis = this;
            tthis.dialogData = {
                position: 'middle',
                type: 'confirm',
                content: {
                    info: tthis.language.chat_detete_contact,
                },
                callback: function() {
                    MiniIM.Action.removeArchive(userName);
                    tthis.$store.dispatch('chat_deleteContact', userId.toString());
                },
            };
        },

        getMessage: function(item) {
            let str = item.message;
            if (item.sysType == 'image') {
                if (this.userInfo.account.usr_id !== item.usr_id) {
                    str = 'You sent a photo.';
                } else {
                    str = item.username + ' sent a photo.';
                }
            }
            return str;
        },
    }

}

</script>
<style scoped>
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.chatContactLi {
    min-height: 100px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #d9d9d9;
    -webkit-overflow-scrolling: auto;
}

.chatContactLi .ico_gold {
    background: url(../assets/ico_gold.png) center no-repeat;
    background-size: auto 17px;
    padding: 2px 0 2px 17px;
    margin-right: 5px;
}

.chatContactLi .content {
    padding-right: 30px;
    line-height: 20px;
    height: 42px;
    font-size: 13px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.chatContactLi .avatar {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    overflow: hidden;
    left: 15px;
    top: 15px;
    background: url(../assets/default_avatar.png) no-repeat;
    background-size: 70px 70px;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.chatContactLi .avatar.icon_seaviceAccount {
    background-image: url(../assets/icon_seaviceAccount.png);
}

.chatContactLi .avatar.icon_seaviceAccount .lazyImgBox {
    display: none;
}

.chatContactLi .ico_replay {
    width: 50px;
    height: 30px;
    position: absolute;
    background: url(../assets/ico_replay.png) center no-repeat;
    background-size: 16px auto;
    left: -12px;
    top: 0px;
}

.chatContactLi .avatar div.male {
    background-image: url(../assets/icon_male.png);
}

.chatContactLi .avatar div.remale {
    background-image: url(../assets/icon_remale.png);
}

.chatContactLi .avatar div.married {
    background-image: url(../assets/icon_married.png);
}

.chatContactLi .avatar div.default {
    background-image: url(../assets/default_avatar.png);
}

.chatContactLi .contactsLi {
    width: calc(100% + 70px);
}

.chatContactLi .info {
    margin: 0 15px 0 105px;
    overflow: hidden;
    width: calc(100% - 180px);
}

.chatContactLi .name {
    margin: 13px 0 0 0;
    padding: 0 40px 0 0;
    position: relative;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    font-size: 15px;
}

.chatContactLi .date {
    display: block;
    position: absolute;
    line-height: 28px;
    color: #a3a4a6;
    font-size: 12px;
    right: 0;
    top: 0;
}

.chatContactLi .num {
    position: absolute;
    min-width: 10px;
    border-radius: 50%;
    text-align: center;
    right: 10px;
    line-height: 10px;
    font-size: 12px;
    padding: 3px;
    top: 45px;
    display: block;
    background: #E64545;
    color: #fff;
}

.chatContactLi .contactsLiOpt {
    position: absolute;
    right: -70px;
    top: 0;
    width: 70px;
    height: 100px;
    background: #ec3535;
    line-height: 100px;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

</style>
